<template>
  <!-- 底部导航栏 -->
  <footer class="footer-container relative w-full mt-8">
    <div
      class="footer-gradient bg-gradient-to-r from-purple-200 via-pink-200 to-red-200"
    ></div>
    <div class="container mx-auto px-2 py-4 relative z-10">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- 品牌信息 -->
        <div class="md:col-span-1">
          <div class="flex items-center mb-4">
            <div
              class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 shadow-lg"
            >
              <span class="text-purple-600 font-bold text-lg">V</span>
            </div>
            <span class="text-2xl font-bold text-gray-800">VlCHI.</span>
          </div>
          <p class="text-gray-600 text-sm">
            陪伴您觉醒潜能，探索内心世界，实现自我成长的智能平台
          </p>
        </div>

        <!-- 导航链接 -->
        <div>
          <h3 class="text-gray-800 font-semibold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li>
              <router-link
                :to="'/'"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
              >
                首页
              </router-link>
            </li>
            <li>
              <router-link
                :to="'/companionship'"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
              >
                智伴优学
              </router-link>
            </li>
            <li>
              <router-link
                :to="'/ask'"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
              >
                睿记精解
              </router-link>
            </li>
            <li>
              <router-link
                :to="'/talk'"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
              >
                心聆秘语
              </router-link>
            </li>
          </ul>
        </div>

        <!-- 关于我们 -->
        <div>
          <h3 class="text-gray-800 font-semibold mb-4">关于我们</h3>
          <ul class="space-y-2">
            <li>
              <a
                href="#"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
                >公司简介</a
              >
            </li>
            <li>
              <a
                href="#"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
                >团队介绍</a
              >
            </li>
            <li>
              <a
                href="#"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
                >发展历程</a
              >
            </li>
            <li>
              <a
                href="#"
                class="footer-link text-gray-600 hover:text-gray-800 transition-colors duration-300"
                >加入我们</a
              >
            </li>
          </ul>
        </div>

        <!-- 联系我们 -->
        <div>
          <h3 class="text-gray-800 font-semibold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fas fa-envelope text-gray-600 mt-1 mr-2"></i>
              <span class="text-gray-600">contact@vichi.com</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-phone text-gray-600 mt-1 mr-2"></i>
              <span class="text-gray-600">195-1175-0514</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-map-marker-alt text-gray-600 mt-1 mr-2"></i>
              <span class="text-gray-600">pick me up!! ball ball you</span>
            </li>
          </ul>
          <div class="mt-4 flex space-x-4">
            <a
              href="#"
              class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-800 hover:bg-gray-400 hover:text-white transition-all duration-300 hover:scale-110"
            >
              <el-icon><Promotion /></el-icon>
            </a>
            <a
              href="#"
              class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-800 hover:bg-gray-400 hover:text-white transition-all duration-300 hover:scale-110"
            >
              <el-icon><StarFilled /></el-icon>
            </a>
            <a
              href="#"
              class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-800 hover:bg-gray-400 hover:text-white transition-all duration-300 hover:scale-110"
            >
              <el-icon><Opportunity /></el-icon>
            </a>
          </div>
        </div>
      </div>

      <!-- 底部装饰波浪线 -->
      <div class="mt-8 relative overflow-hidden">
        <div class="footer-wave absolute inset-x-0 bottom-0 h-6">
          <svg
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
            class="w-full h-full"
          >
            <path
              d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
              fill="#f5f7fa"
              class="footer-wave-fill"
            ></path>
          </svg>
        </div>
      </div>

      <!-- 版权信息 -->
      <div
        class="mt-0 pt-6 border-t border-gray-200 text-center text-gray-600 text-sm"
      >
        <p>© 2025 VlCHI. 版权所有 | 陪伴您觉醒潜能</p>
      </div>
    </div>

    <!-- 底部发光效果 -->
    <div
      class="footer-glow absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-t from-purple-200/30 to-transparent"
    ></div>
  </footer>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter, RouterLink } from "vue-router";
import { Promotion, StarFilled, Opportunity } from "@element-plus/icons-vue";
import "@/assets/main.css";
// 监听滚动事件，控制底部导航栏效果
onMounted(() => {
  const footer = document.querySelector(".footer-container");
  const wave = document.querySelector(".footer-wave-fill");

  if (footer && wave) {
    const handleScroll = () => {
      const scrollY = window.scrollY;
      // 滚动时调整波浪动画速度
      wave.style.animation = `waveMove ${10 - scrollY / 200}s linear infinite`;

      // 滚动到一定距离后添加阴影
      if (scrollY > 500) {
        footer.style.boxShadow = "0 -5px 15px rgba(0, 0, 0, 0.1)";
      } else {
        footer.style.boxShadow = "none";
      }
    };

    window.addEventListener("scroll", handleScroll);
    handleScroll(); // 初始化

    // 波浪动画定义
    const style = document.createElement("style");
    style.textContent = `
      @keyframes waveMove {
        0% { transform: translateX(0); }
        100% { transform: translateX(-1200px); }
      }
    `;
    document.head.appendChild(style);

    // 组件卸载时清理
    return () => {
      window.removeEventListener("scroll", handleScroll);
      document.head.removeChild(style);
    };
  }
});
</script>

<style scoped>
/* 底部导航栏基础样式 */
.footer-container {
  background-color: #f5f7fa;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.footer-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 0;
}

/* 链接悬停效果 */
.footer-link {
  position: relative;
  transition: all 0.3s ease;
}

.footer-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #333;
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 100%;
}

/* 社交媒体图标动画 */
.footer-container a {
  transition: all 0.3s ease;
}

.footer-container a:hover {
  transform: translateY(-3px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-container .container {
    padding: 40px 20px 20px;
  }

  .footer-container .grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-wave {
    height: 4px;
  }
}

@media (max-width: 480px) {
  .footer-container .grid {
    grid-template-columns: 1fr;
  }

  .footer-container h3 {
    margin-top: 20px;
  }
}
</style>
